<template>
    <el-input v-model="data.searchStockName" placeholder="输入股票名称进行搜索" @input="initData"
        style="width: 200px; margin-right: 20px; margin-bottom: 14px; float: left;" />
    <el-input v-model="data.searchTime" placeholder="输入创建时间进行搜索" @input="initData"
        style="width: 200px; margin-bottom: 14px; float: left;" />

    <el-table :data="data.tableData" border style="width: 100%;" 
        :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="id" label="id" sortable />
        <el-table-column prop="recordId" label="记录编号" sortable />
        <el-table-column prop="stockId" label="股票编号" sortable />
        <el-table-column prop="stockName" label="股票名称" sortable />
        <el-table-column prop="createTime" label="创建时间" sortable />
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="data.total" style="margin-top: 15px;"
        @current-change="initData" v-model:current-page="data.current" :page-size="data.pageSize" />
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import { postRequest, message } from '@/utils/api';

export default {
    name: "Record",
    setup() {
        const data = reactive({
            tableData: [],
            searchStockName: "",
            searchTime: "",
            current: 1,
            total: 100,
            pageSize: 20,
        });
        onBeforeMount(() => {
            initData();
        });
        function initData() {
            postRequest("/record/list", {
                pageNum: data.current,
                searchStockName: data.searchStockName.trim(),
                searchTime: data.searchTime.trim(),
                username: localStorage.getItem("username")
            }).then((res) => {
                if (res.data.code == 200) {
                    data.tableData = res.data.data.recordList;
                    data.total = res.data.data.total;
                } else if (res.data.code == 500) {
                    message(res.data.msg, "error");
                }
            });
        }
        return {
            data,
            initData,
        };
    },
};
</script>

<style scoped>
</style>